<template>
  <el-container class="one">
    <el-aside width="200px" class="aside">
      <el-tree
        :data="data"
        :props="defaultProps"
        :highlight-current="true"
        :expand-on-click-node="false"
        :default-expanded-keys="['1024985257948084801']"
        :default-checked-keys="['1024985257948084801']"
        icon-class="el-icon-folder-add"
        node-key="id"
        :current-node-key="currentNodeKey"
        @node-click="handleNodeClick"
      />
    </el-aside>
    <el-container>
      <!-- ================================================================================================= -->
      <el-header height="350px" class="header">
        <h3>机构信息</h3>
        <el-form
          ref="form"
          :model="sizeForm"
          label-width="80px"
          size="medium"
          :inline="true"
        >
          <el-row type="flex" justify="space-between">
            <el-form-item label="机构编号">
              <el-input v-model="sizeForm.id" style="width: 350px" disabled />
            </el-form-item>
            <el-form-item label="机构名称">
              <el-input v-model="sizeForm.name" style="width: 350px" disabled />
            </el-form-item>
            <el-form-item label="机构类型">
              <el-select
                v-model="sizeForm.type"
                placeholder="请选择机构类型"
                style="width: 350px"
                disabled
              >
                <el-option label="一级运转" :value="1" />
                <el-option label="二级运转" :value="2" />
                <el-option label="网点" :value="3" />
              </el-select>
            </el-form-item>
          </el-row>
          <el-row type="flex" justify="space-between">
            <el-form-item label="机构地址">
              <el-select
                v-model="sizeForm.province.id"
                style="width: 400px"
                class="select"
                :disabled="isDisabled"
                @change="handleCityChange"
              >
                <el-option v-for="item in province" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
              <el-select
                v-model="sizeForm.city.id"
                style="width: 400px"
                class="select"
                :disabled="isDisabled"
                @change="handleCountyChange"
              >
                <el-option v-for="item in city" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
              <el-select
                v-model="sizeForm.county.id"
                style="width: 400px"
                :disabled="isDisabled"
              >
                <el-option v-for="item in county" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-row>
          <el-row type="flex" justify="space-between">
            <el-form-item label="详细地址">
              <el-input
                v-model="sizeForm.name"
                style="width: 350px"
                :disabled="isDisabled"
              />
            </el-form-item>
            <el-form-item label="经度">
              <el-input
                v-model="sizeForm.longitude"
                style="width: 350px"
                disabled
              />
            </el-form-item>
            <el-form-item label="纬度">
              <el-input
                v-model="sizeForm.latitude"
                style="width: 350px"
                disabled
              />
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="机构负责人" label-width="94px">
              <el-input
                v-model="sizeForm.managerName"
                style="width: 350px"
                :disabled="isDisabled"
              />
            </el-form-item>
            <el-form-item label="机构电话" class="input">
              <el-input
                v-model="sizeForm.phone"
                style="width: 350px"
                :disabled="isDisabled"
              />
            </el-form-item>
          </el-row>
          <el-row style="text-align: center">
            <el-form-item size="medium">
              <template>
                <el-button
                  v-if="isDisabled"
                  type="danger"
                  @click="editBusinessHall"
                >编辑</el-button>
                <el-button
                  v-else
                  type="danger"
                  @click="keepBusinessHall"
                >保存</el-button>
              </template>
            </el-form-item>
          </el-row>
        </el-form>
      </el-header>
      <!-- =============================================================================================================================== -->
      <el-main class="main">
        <h3 style="margin-top: 0">员工信息</h3>
        <el-table :data="tableData" border style="width: 100%" size="mini">
          <el-table-column type="index" label="序号" width="50" />
          <el-table-column prop="userId" label="员工编号" width="180" />
          <el-table-column prop="name" label="员工姓名" />
          <el-table-column prop="mobile" label="手机号" />
          <el-table-column prop="agency.name" label="所属机构" />
          <el-table-column prop="account" label="系统账户" />
          <el-table-column prop="stationName" label="系统角色" />
          <el-table-column label="账号状态">
            <template v-slot="{ row }">
              <span v-if="row.status === 1">正常</span>
              <span v-else>禁用</span>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import {
  getTreeList,
  getInstitutionDetails,
  getStaffList,
  getAreasList,
  editBusinessHall
} from '@/api/organization'
export default {
  data() {
    return {
      sizeForm: {
        province: {
          id: null
        },
        city: {
          id: null
        },
        county: {
          id: null
        }
      },
      tableData: [],
      data: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      city: [], // 区
      county: [], // 市
      province: [], // 省

      staffList: {
        page: 1,
        pageSize: 10,
        agencyId: '1024985257948084801'
      },
      isDisabled: true,
      currentNodeKey: '1024985257948084801'
    }
  },
  created() {
    this.getTreeList()
    this.handleNodeClick()
    this.getAreasList()
  },
  methods: {
    handleExpand(node) {
      node.expanded = true
    },
    handleCollapse(node) {
      node.expanded = false
    },
    // 获取树状机构信息
    async getTreeList() {
      const res = await getTreeList()
      this.data = JSON.parse(res.data)
    },
    async handleNodeClick(node) {
      if (node) {
        this.staffList.agencyId = node.id
      }
      // // 获取机构详情
      const { data } = await getInstitutionDetails(this.staffList.agencyId)
      // 市
      this.handleCityChange(data.province.id)
      // 区
      this.handleCountyChange(data.city.id)
      // // 获取员工信息列表
      const list = await getStaffList(this.staffList)
      this.tableData = list.data.items
      // console.log(data)
      this.sizeForm = data
    },
    // 编辑机构信息
    editBusinessHall() {
      this.title = '保存'
      this.isDisabled = false
    },
    // 保存
    async keepBusinessHall() {
      const { address, city: { id: cityId }, county: { id: countyId }, province: { id: provinceId }, type, phone, extra, id, latitude, longitude, managerName, name, parent, status, parentId } = this.sizeForm
      const newList = { address, cityId, countyId, provinceId, type, phone, extra, id, latitude, longitude, managerName, name, parent, parentId, status }
      newList.provinceId = +newList.provinceId
      newList.cityId = +newList.cityId
      newList.countyId = +newList.countyId
      newList.id = +newList.id
      newList.parentId = +newList.parentId
      await editBusinessHall(newList)
      this.title = '编辑'
      this.isDisabled = true
    },
    // 省
    async getAreasList(id) {
      const { data } = await getAreasList(id)
      this.province = data
    },
    // 市
    async handleCityChange(id) {
      const { data } = await getAreasList(id)
      this.city = data
    },
    // 区
    async handleCountyChange(id) {
      const { data } = await getAreasList(id)
      this.county = data
    }
  }
}
</script>

<style scoped>
.one {
  background-color: #f3f4f7;
}
.aside {
  background-color: #fff;
  margin: 20px 20px 0 20px;
  padding-top: 20px;
  height: 850px;
}
.header {
  background-color: #fff;
  margin-right: 20px;
  margin-bottom: 20px;
  margin-top: 20px;
}
.main {
  background-color: #fff;
  margin-right: 20px;
}
.custom-icon i {
  margin-right: 4px;
}
.select {
  margin-right: 45px;
}
.input {
  margin-left: 30px;
}
</style>
